<template>
  <div>
    <div class="m16">
      <van-tag
        class="tag_class"
        :class="{ tag_active: modelValue == key }"
        round
        v-for="(item, key, index) in list"
        :key="index"
        @click="clickType(key)"
        >{{ item }}</van-tag
      >
    </div>
    <div class="p16 u-f">
      <van-button block round @click="onReset"> 重置 </van-button>
      <van-button class="ml8" type="primary" block round @click="onConfirm">
        确认
      </van-button>
    </div>
  </div>
</template>

<script setup>
import {} from 'vue'
let props = defineProps({
  modelValue: Number,
  list: {
    type: Object,
    default() {
      return {}
    }
  }
})

let emit = defineEmits(['update:modelValue', 'confirm'])
const clickType = (index) => {
  emit('update:modelValue', Number(index))
  console.log(props.modelValue)
}
const onReset = () => {
  emit('update:modelValue', 0)
}
const onConfirm = () => {
  emit('confirm')
}
</script>

<style scoped lang="scss">
.tag_class {
  padding: 10px 12px;
  font-size: 14px;
  margin: 0px 8px 8px 0px;
  background-color: #eee;
  color: #999;
}
.tag_active {
  background-color: $color_primary;
  color: white;
}
</style>
